<template>
  <div class="page-container">
    <div class="home-top">
      <div class="hot-item">
        <div class="ht-name">总营业额(元)</div>
        <div class="ht-sum">8888888</div>
      </div>
      <div class="hot-item">
        <div class="ht-name">总订单数(个)</div>
        <div class="ht-sum">8888888</div>
      </div>
      <div class="hot-item">
        <div class="ht-name">当月订单数(个)</div>
        <div class="ht-sum">666</div>
      </div>
      <div class="hot-item">
        <div class="ht-name">访客(人)</div>
        <div class="ht-sum">8888888</div>
      </div>
    </div>

    <div>
      <div class="item-1">
        <div id="myChart1"></div>
        <div id="myChart2"></div>
      </div>
      <div class="item-2">
        <div id="myChart3"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted } from 'vue'
import * as echarts from 'echarts'

export default {
  setup () {
    const state = reactive({
      option1: {
        title: {
          text: 'Referer of a Website',
          subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        // legend: {
        //   orient: 'vertical',
        //   left: 'left'
        // },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      option2: {
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [150, 130, 254, 218, 135, 147, 20],
            type: 'line',
            areaStyle: {}
          }
        ]
      },
      option3: {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [150, 130, 254, 218, 135, 147, 20],
            type: 'bar'
          }
        ]
      }
    })

    const initeCharts1 = () => {
      const myChart1 = echarts.init(document.getElementById('myChart1'))
      // 绘制图表
      myChart1.setOption(state.option1)
    }
    const initeCharts2 = () => {
      const myChart2 = echarts.init(document.getElementById('myChart2'))
      // 绘制图表
      myChart2.setOption(state.option2)
    }

    const initeCharts3 = () => {
      const myChart3 = echarts.init(document.getElementById('myChart3'))
      // 绘制图表
      myChart3.setOption(state.option3)
    }

    onMounted(() => [
      initeCharts1(),
      initeCharts2(),
      initeCharts3()
    ])

    return {
      ...toRefs(state)
    }
  }
}
</script>

<style lang="scss" scoped>
.home-top {
  display: flex;
  justify-content: space-between;
  .hot-item {
    width: 20%;
    background: #fff;
    border-radius: 10px;
    .ht-name {
      font-size: 14px;
      border-bottom: 1px solid #e7eaec;
      line-height: 40px;
      padding-left: 20px;
    }
    .ht-sum {
      line-height: 40px;
      padding-left: 20px;
      color: #676a6c;
    }
  }
}
.item-1 {
    display: flex;
    justify-content: space-around;

    #myChart1 {
      width: 400px;
      height: 380px;
    }
    #myChart2 {
      width: 500px;
      height: 380px;
    }
}
.item-2 {
  display: flex;
  justify-content: center;
  #myChart3 {
    width: 1200px;
    height: 400px;
  }
}
</style>
